import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types'
import { Table , Modal, Menu, Icon, Button } from 'antd'
import Query from './Query'
import Toggles from '../../components/Toggles'
import styles from './index.less';
import classnames from 'classnames'
import { Link } from 'dva/router'
import DropOption  from '../../components/DropOption/DropOption'
import QueueAnim from 'rc-queue-anim';

const confirm = Modal.confirm

function List ({
  userTwo: {
    list,
    load,
    selectedRowKeys,
    selectedRows,
    record
  },
  onSearch,
  location,
  onDeleteItem,
  onEditItem,
  dispatch,
  onCreate
  }) {

  const handleMenuClick = (record, e) => {


  }

  // function createHandler(values) {
  //        onCreate(values)
  //   }
  //复选框
  const rowSelection = {
       onChange: (selectedRowKeys, selectedRows) => {
         dispatch({
           type:'userTwo/save',
             payload:{record:selectedRows, selectedRowKeys}
         })
       },
       type: 'checkbox',
       selectedRowKeys:selectedRowKeys
     }

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',

    }, {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },{
      title: '用户',
      dataIndex: 'username',
      key: 'username',
    },{
      title: '密码',
      dataIndex: 'password',
      key: 'password',
    }, {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
      render: (text) => <span>{text===1  ? '男': '女'}</span>
    }, {
      title: '电话',
      dataIndex: 'phone',
      key: 'phone',
    },{
      title: '地址',
      dataIndex: 'address',
      key: 'address',
    },
  ]

  return (
    <div className="content-inner" style={{'background':'white'}}>

      <Toggles name='查询条件'>
        <Query onOk={onSearch} />
      </Toggles>

      <QueueAnim type={'right'} delay={30} duration={1000} ease={'easeInQuart'}>

      <div style={{padding:'10px 10px'}}>

      <Button style={{marginLeft:'5px'}} onClick={onCreate}>新增</Button>


      <Button style={{marginLeft:'7px'}} onClick={onDeleteItem}>删除</Button>

      <Button style={{marginLeft:'7px'}}>修改</Button>

      <Button style={{marginLeft:'7px'}}>查看</Button>
      </div>

      <Table
        key='1'
        pagination={{
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: total => `共 ${total} 条`,
          pageSizeOptions:['5','10','15','20'],
          defaultPageSize:5
        }}
        rowSelection={rowSelection}
        loading={load}
        dataSource={list}
        //className={classnames({ [styles.table]: true, [styles.motion]: true })}
        className = {styles.table}

        simple
        rowKey={record => record.id}
        columns={columns}
        scroll={{ x: 1800}}
      />
      </QueueAnim>

    </div>
  );
}

List.propTypes = {
  userTwo: PropTypes.object.isRequired,
  onDeleteItem: PropTypes.func.isRequired,
  onEditItem: PropTypes.func.isRequired
};

export default List;
